// 产品详情的 商品介绍 规格参数
<template>
  <div class="parameter">
    <ol>
      <li
        v-for="(item,index) in title"
        :key="item.id"
        :class=" item.active ? 'active' : ''"
        @click="changeActive($event,index)"
      >{{item.name}}</li>
    </ol>
    <!-- 规格参数 -->
    <div class="details">
      <div v-html="parameter"></div>
    </div>
    <!-- 售后服务 -->
    <div class="After-sale">
      <h3>售后服务</h3>
      <ul class="Tips">
        <h4>温馨提示:</h4>
        <li v-for="(item,index) in Tips" :key="index">{{ item }}</li>
      </ul>
    </div>
  </div>
</template>
<script>
import goods from '../../../assets/images/goods1.png'   // 图片
export default {
  props: ["parameter"],
  name: 'parameter',

  data() {
    return {
      title: [
        {
          name: `规格参数`,
          id: 1,
          active: true
        }
      ],
      images1: [

        "//img14.360buyimg.com/popWaterMark/jfs/t28375/111/833240952/160512/70305837/5bfe7af9N5546d4fb.jpg"
      ],
      images2: [
        "//img13.360buyimg.com/popWaterMark/jfs/t30829/288/806438549/169705/68029ef6/5bfe7af9N3939e132.jpg"
      ],

      Tips: [
        `孚地卖场会重视您向客服咨询的每一个问题，并在1个工作日内给予您答复（答复时间：周一至周五8:00-17:00，`,
        `节假日除外），请您耐心等待！`,
        `若您有紧急问题，请拨打孚地卖场售后热线：${this.$store.state.contact_info.complaint_call}`
      ]
    }
  },

  methods: {
    changeActive(event, index) {
      this.title.forEach(element => {
        element.active = false
      })
      this.title[index].active = true
    }
  }
}
</script>
<style lang="scss" scoped>
.parameter {
  width: 968px;
  border-top: 1px solid #e6e4e4;
  ol {
    display: flex;
    flex-direction: row;
    background: #f0efef;
    li {
      padding: 0px 20px;
      font-size: 14px;
      font-weight: 800;
      line-height: 40px;
      cursor: pointer;
    }
    .active {
      color: #008cff;
      border-top: 2px solid #008cff;
      line-height: 38px;
      background: #fff;
    }
  }
  .details {
    width: 100%;
    min-height: 661px;
    div {
      margin-top: 20px;
      margin-left: 15px;
    }
  }
  .After-sale {
    margin-top: 20px;
    h3 {
      background: #008cff;
      line-height: 40px;
      color: #fff;
      text-indent: 22px;
      font-size: 14px;
    }
  }
  .Tips {
    border-left: 1px solid #e6e4e4;
    border-right: 1px solid #e6e4e4;
    border-bottom: 1px solid #e6e4e4;
    padding-bottom: 20px;
    h4 {
      font-size: 13px;
      line-height: 41px;
      text-indent: 22px;
    }
    li {
      line-height: 28px;
      padding-left: 40px;
    }
  }
}
</style>
 